<script setup lang="ts">
import vChart from "@/views/monitor/server/components/VChart.vue";
import {
  ArrowRight,
  Plus,
  Search,
  FullScreen,
  Close,
  DArrowRight,
  DArrowLeft,
  ArrowLeft
} from "@element-plus/icons-vue";
import { useCalendarHook } from "./calendarHook";
import { onMounted, ref } from "vue";
const {
  selValue,
  calenderTitle,
  pervYearClick,
  pervMonthClick,
  nextYearClick,
  nextMonthClick,
  calendar,
  selectDate,
  setActiveDay,
  vppList,
  vppUserList,
  activeVppId,
  showDateItemCell,
  setActive,
  comSubit,
  options,
  vppChange,
  rowClick,
  loading,
  reset
} = useCalendarHook();

const myBox = ref(null);
const height = ref(0);

onMounted(() => {
  height.value = myBox.value.offsetHeight - 651;
});
</script>

<template>
  <div ref="myBox" v-loading="loading" class="w-full h-full flex flex-col">
    <div class="w-full flex mb-[20px] h-[631px]">
      <div class="rl w-1/3 pr-[20px]">
        <el-card>
          <el-calendar ref="calendar">
            <template #header>
              <div class="flex w-full">
                <div class="w-[40%]">
                  <el-select
                    v-model="activeVppId"
                    placeholder="请选择虚拟电厂"
                    @change="vppChange"
                  >
                    <el-option
                      v-for="item in vppList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </div>
                <div class="flex w-[60%] h-[40px] justify-around items-center">
                  <div
                    :class="{
                      'cursor-not-allowed': !pervYearClick,
                      'cursor-pointer': pervYearClick
                    }"
                    @click="selectDate('prev-year')"
                  >
                    <el-icon size="20"><DArrowLeft /></el-icon>
                  </div>
                  <div
                    :class="{
                      'cursor-not-allowed': !pervMonthClick,
                      'cursor-pointer': pervMonthClick
                    }"
                    @click="selectDate('prev-month')"
                  >
                    <el-icon size="22"><ArrowLeft /></el-icon>
                  </div>
                  <div class="text-[22px] font-bold">{{ calenderTitle }}</div>
                  <div
                    :class="{
                      'cursor-not-allowed': !nextMonthClick,
                      'cursor-pointer': nextMonthClick
                    }"
                    @click="selectDate('next-month')"
                  >
                    <el-icon size="22"><ArrowRight /></el-icon>
                  </div>
                  <div
                    :class="{
                      'cursor-not-allowed': !nextYearClick,
                      'cursor-pointer': nextYearClick
                    }"
                    @click="selectDate('next-year')"
                  >
                    <el-icon size="20"><DArrowRight /></el-icon>
                  </div>
                </div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div
                class="w-full h-full flex-col flex justify-center items-center"
                :class="{
                  'bg-[#27a2a2]': selValue.findIndex(i => i === data.day) > -1
                }"
                @click.stop="setActiveDay(data)"
              >
                <div>{{ showDateItemCell(data) }}</div>
                <!--                <div>{{ showDateItemCellBottom(data) }}</div>-->
              </div>
            </template>
          </el-calendar>
        </el-card>
      </div>
      <div class="w-2/3 h-full">
        <el-card class="my-card w-full h-full">
          <div class="w-full h-[50px] flex justify-end items-center">
            <el-button type="primary" @click="reset">刷新</el-button>
            <el-button type="primary" @click="comSubit">计算基线</el-button>
          </div>
          <el-table :data="vppUserList" height="540px" @row-click="rowClick">
            <el-table-column align="center" width="50">
              <template #default="scope">
                <div
                  class="w-[16px] h-[16px] border cursor-pointer"
                  :class="{ 'bg-[#27a2a2]': scope.row.active }"
                  @click="setActive(scope.row)"
                />
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" prop="0" label="所属企业" />-->
            <el-table-column align="center" prop="id" label="用户编号" />
            <el-table-column align="center" prop="name" label="资源名称" />
            <el-table-column align="center" prop="3" label="调控模式">
              <template #default>
                <span>手动</span>
              </template> </el-table-column
            >>
            <el-table-column align="center" prop="4" label="响应方式">
              <template #default>
                <span>自动</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="5" label="调控/协调">
              <template #default>
                <span>调控</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createBy" label="创建人" />
          </el-table>
        </el-card>
      </div>
    </div>
    <div class="w-full bg-red-600" :style="{ height: height + 'px' }">
      <el-card class="m-card w-full h-full">
        <div class="w-full h-full">
          <vChart :options="options" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.m-card .el-card__body) {
  width: 100%;
  height: 100%;
}

:deep(.my-bg2 .el-card__body) {
  width: 100%;
  height: 100%;
  background-color: rgb(143 242 255 / 20%);
}

:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
}
</style>
